import router, { asyncRoutes } from '@/router'
import store from './store'
// 导入进度条
import NProgress from 'nprogress' // progress bar
// 导入进度条样式
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'
// 设置全局路由前置守卫
// 设置白名单
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  console.log('页面跳转一定会经过这里')
  console.log('去哪', to)
  // console.log('从哪来', from)
  NProgress.start() // 开启进度条
  const token = store.state.user.token
  // 动态显示网站标题
  document.title = getPageTitle(to.meta.title)
  if (token) {
    console.log('有token')
    if (to.path === '/login') {
      console.log('你已经登录过了,去主页')
      next('/') // next()如果里面写的有路径,则不会经过router.beforeEach函数 所以要下面要在关一次
      NProgress.done() // 关闭进度条
    } else {
      console.log('不是去登录页,放行')
      // 判断vuex中是否已经存储的有用户信息 如果有 则不用在发送请求获取了
      if (!store.state.user.userInfo.userId) {
        // 发送请求获取用户信息 这里加await 是确保成功获取到用户信息之后在跳转页面时
        // 1.拿到返回的用户页面级别的权限信息
        const menus = await store.dispatch('user/getUserInfo')
        console.log('menus', menus)
        // 2.根据权限信息动态添加路由和渲染左侧菜单
        // 根据用户的权限信息 来过滤动态路由中的路由对象
        const newAsyncRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name) // 返回true证明有这个权限 false表示没有 没有则不添加进新数组中,则就不渲染对应的左侧模块
        })
        // addRoutes使用方法router.addRoutes([路由配置对象])
        // 或者:this.$router.addRoutes([路由配置对象])
        // 由于动态添加路由是一个异步的过程,哈没有加载完成就直接跳转了页面,出现白屏的问题
        router.addRoutes(newAsyncRoutes) // 动态添加路由 asyncRoutes是动态路由对象
        // 解决刷新跳转到404
        router.addRoutes([{ path: '*', redirect: '/404', hidden: true }])
        // 将动态路由存储到vuex中
        store.commit('menus/updateRoutes', newAsyncRoutes)
        // 解决刷新跳转到白屏的问题
        next({ ...to, replace: true }) // 动态路由页面加载完成,重新进入页面
        return
      }
      next() // 没写路径 则会经过路由后置守卫
    }
  } else {
    console.log('没有token')
    if (whiteList.includes(to.path)) {
      console.log('去的是白名单页面,放行')
      next()
    } else {
      console.log('去的不是白名单页面,跳转到登录页')
      next('/login')
      NProgress.done() // 关闭进度条
    }
  }
})

// 路由后置守卫 页面跳转完毕
router.afterEach(() => {
  NProgress.done() // 页面跳转完毕关闭进度条
})
